<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <title>Sass:Syntactically Awesome Style Sheets</title>
    <meta content="Syntactically Awesome Style Sheets" name="description">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
   <div class="page">
       <div class="alert stickers">
           <div class="container">
               <p>
                   <strong>Sass stands with trans detainees.</strong>
                   <a href="https://www.tfaforms.com/369889">
                      Donate to the Trans Justice Funding Project. 
                   </a>
               </p>
           </div>
       </div>
       <div class="pop-stripe"></div>
       <header class="banner" role="banner">
           <div class="container">
               <h1 class="site-brand">
                   <a href="http://www.zhuchuli.cn:4000/hexo-theme-huxblog/">
                      <img height="48" src="images/logo-b6e1ef6e.svg" alt="Sass">
                   </a>
               </h1>
               <nav class="navigation collapse" role="navigation">
                    <ul>
                        <li><a href="./install.html">Install</a></li>
                        <li><a href="./guide.html">Learn Sass</a></li>
                        <li><a href="./blog.html">Blog</a></li>
                        <li><a href="./documentation.html">Documentation</a></li>
                        <li><a href="./community.html">Get Involved</a></li>
                        <li><a href="./libsass.html">libSass</a></li>
                    </ul>
               </nav>
               <div class="banner-toggle">
                   <button data-target=".navigation" data-toggle="collapse" type="button">
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                   </button>
               </div> 

           </div>
       </header>
       <div class="page-header">
           <div class="container">
               <h1> Sass Basics </h1>
           </div>
       </div>
       <div class="body guide">
          <div class="container">
            <div class="body guide">
                <div class="sl-c-introduction"> <p>Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. <a href="/install">Go here</a> if you want to learn how to get everything setup.</p> </div> 
                <section id="topic-1"> <h2>Preprocessing</h2> <p><span class="caps">CSS</span> on its own can be fun, but stylesheets are getting larger,&nbsp;more complex, and harder to maintain. This is where a preprocessor can&nbsp;help. Sass lets you use features that don't exist in <span class="caps">CSS</span> yet like&nbsp;variables, nesting, mixins, inheritance and other nifty goodies that make writing&nbsp;<span class="caps">CSS</span> fun&nbsp;again.</p> <p>Once you start tinkering with Sass, it will take your preprocessed&nbsp;Sass file and save it as a normal <span class="caps">CSS</span> file that you can use in your&nbsp;website.</p> <p>The most direct way to make this happen is in your terminal. Once Sass&nbsp;is installed, you can compile your Sass to <span class="caps">CSS</span> using the <code>sass</code>&nbsp;command. You'll need to tell Sass which file to build from, and where to output&nbsp;<span class="caps">CSS</span> to. For example, running <code>sass input.scss output.css</code> from your&nbsp;terminal would take a single Sass file, <code>input.scss</code>, and compile that file&nbsp;to <code>output.css</code>.</p> <p>You can also watch individual files or directories with the&nbsp;<code>--watch</code> flag. The watch flag tells Sass to watch your source files for&nbsp;changes, and re-compile <span class="caps">CSS</span> each time you save your Sass. If you wanted to&nbsp;watch (instead of manually build) your <code>input.scss</code> file, you'd just add&nbsp;the watch flag to your command, like&nbsp;so:</p> 
                    <pre class="highlight plaintext"><code>sass --watch input.scss output.css</code></pre> <p>You can watch and output to directories by using folder paths as&nbsp;your input and output, and separating them with a colon. In this&nbsp;example:</p> <pre class="highlight plaintext"><code>sass --watch app/sass:public/stylesheets</code></pre> <p>Sass would watch all files in the <code>app/sass</code> folder for changes,&nbsp;and compile <span class="caps">CSS</span> to the <code>public/stylesheets</code>&nbsp;folder.</p> <hr> </section>
                <section id="topic-2"> <h2>Variables</h2> <p>Think of variables as a way to store information that you want to&nbsp;reuse throughout your stylesheet. You can store things like colors, font&nbsp;stacks, or any <span class="caps">CSS</span> value you think you'll want to reuse. Sass uses the <code>$</code>&nbsp;symbol to make something a variable. Here's an&nbsp;example:</p> <div class="code-example ui-tabs can-split ui-corner-all ui-widget ui-widget-content" style="--split-location: 50.0%"><ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-corner-all ui-widget-header" role="tablist"><li class="ui-tabs-tab ui-tabs-active ui-corner-top ui-state-default ui-tab ui-state-active" role="tab" tabindex="0" aria-controls="example-1-scss" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true"><a href="#example-1-scss" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1"><span class="caps">SCSS</span></a></li><li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" role="tab" tabindex="-1" aria-controls="example-1-sass" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false"><a href="#example-1-sass" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Sass</a></li><li class="ui-tabs-tab css-tab ui-corner-top ui-state-default ui-tab" role="tab" tabindex="-1" aria-controls="example-1-css" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false"><a href="#example-1-css" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3"><span class="caps">CSS</span></a></li></ul><div id="example-1-scss" class="ui-tabs-panel scss ui-corner-bottom ui-widget-content" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false">
                    <pre class="highlight scss">
<code>
<span class="nv">$font-stack</span><span class="p">:</span>    <span class="n">Helvetica</span><span class="o">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="nv">$primary-color</span><span class="p">:</span> <span class="mh">#333</span><span class="p">;</span>
<span class="nt">body</span> <span class="p">{</span>
    <span class="nl">font</span><span class="p">:</span> <span class="m">100%</span> <span class="nv">$font-stack</span><span class="p">;</span>
    <span class="nl">color</span><span class="p">:</span> <span class="nv">$primary-color</span><span class="p">;</span>
<span class="p">}</span>
</code>
                    </pre>
                    </div>
                        <div id="example-1-css" class="ui-tabs-panel css ui-tabs-panel-inactive ui-corner-bottom ui-widget-content" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true" style="">
                        <pre class="highlight css">
<code><span class="nt">body</span> <span class="p">{</span>
    <span class="nl">font</span><span class="p">:</span> <span class="m">100%</span> <span class="n">Helvetica</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
    <span class="nl">color</span><span class="p">:</span> <span class="m">#333</span><span class="p">;</span>
<span class="p">}</span>



</code>
                    </pre>
                </div></div> <p>When the Sass is processed, it takes the variables we define for&nbsp;the <code>$font-stack</code> and <code>$primary-color</code> and outputs normal <span class="caps">CSS</span> with&nbsp;our variable values placed in the <span class="caps">CSS.</span> This can be extremely powerful&nbsp;when working with brand colors and keeping them consistent throughout the&nbsp;site.</p> <hr> 
                </section>
                <section id="topic-3"> <h2>Nesting</h2> <p>When writing <span class="caps">HTML</span> you've probably noticed that it has a clear nested&nbsp;and visual hierarchy. <span class="caps">CSS</span>, on the other hand,&nbsp;doesn't.</p> <p>Sass will let you nest your <span class="caps">CSS</span> selectors in a way that follows the&nbsp;same visual hierarchy of your <span class="caps">HTML.</span> Be aware that overly nested rules&nbsp;will result in over-qualified <span class="caps">CSS</span> that could prove hard to maintain and&nbsp;is generally considered bad&nbsp;practice.</p> <p>With that in mind, here's an example of some typical styles for a&nbsp;site's navigation:</p> <div class="code-example ui-tabs can-split ui-corner-all ui-widget ui-widget-content" style="--split-location: 50.0%"><ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-corner-all ui-widget-header" role="tablist"><li class="ui-tabs-tab ui-tabs-active ui-corner-top ui-state-default ui-tab ui-state-active" role="tab" tabindex="0" aria-controls="example-2-scss" aria-labelledby="ui-id-4" aria-selected="true" aria-expanded="true"><a href="#example-2-scss" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-4"><span class="caps">SCSS</span></a></li><li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" role="tab" tabindex="-1" aria-controls="example-2-sass" aria-labelledby="ui-id-5" aria-selected="false" aria-expanded="false"><a href="#example-2-sass" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-5">Sass</a></li><li class="ui-tabs-tab css-tab ui-corner-top ui-state-default ui-tab" role="tab" tabindex="-1" aria-controls="example-2-css" aria-labelledby="ui-id-6" aria-selected="false" aria-expanded="false"><a href="#example-2-css" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-6"><span class="caps">CSS</span></a></li></ul><div id="example-2-scss" class="ui-tabs-panel scss ui-corner-bottom ui-widget-content" aria-labelledby="ui-id-4" role="tabpanel" aria-hidden="false"><pre class="highlight scss"><code><span class="nt">nav</span> <span class="p">{</span>
  <span class="nt">ul</span> <span class="p">{</span>
    <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
    <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
    <span class="nl">list-style</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
  <span class="p">}</span>

  <span class="nt">li</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span> <span class="p">}</span>

  <span class="nt">a</span> <span class="p">{</span>
    <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
    <span class="nl">padding</span><span class="p">:</span> <span class="m">6px</span> <span class="m">12px</span><span class="p">;</span>
    <span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre></div><div id="example-2-css" class="ui-tabs-panel css ui-tabs-panel-inactive ui-corner-bottom ui-widget-content" aria-labelledby="ui-id-6" role="tabpanel" aria-hidden="true" style=""><pre class="highlight css"><code><span class="nt">nav</span> <span class="nt">ul</span> <span class="p">{</span>
  <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="nl">list-style</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">nav</span> <span class="nt">li</span> <span class="p">{</span>
  <span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">nav</span> <span class="nt">a</span> <span class="p">{</span>
  <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
  <span class="nl">padding</span><span class="p">:</span> <span class="m">6px</span> <span class="m">12px</span><span class="p">;</span>
  <span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>


</code></pre></div></div> <p>You'll notice that the <code>ul</code>, <code>li</code>, and <code>a</code> selectors are nested inside&nbsp;the <code>nav</code> selector. This is a great way to organize your <span class="caps">CSS</span> and make it&nbsp;more readable.</p> <hr> </section>
<section id="topic-4"> <h2>Partials</h2> <p>You can create partial Sass files that contain little snippets of <span class="caps">CSS</span>&nbsp;that you can include in other Sass files. This is a great way to&nbsp;modularize your <span class="caps">CSS</span> and help keep things easier to maintain. A partial is&nbsp;a Sass file named with a leading underscore. You might name it&nbsp;something like <code>_partial.scss</code>. The underscore lets Sass know that the file is&nbsp;only a partial file and that it should not be generated into a <span class="caps">CSS</span> file.&nbsp;Sass partials are used with the <code>@use</code>&nbsp;rule.</p> <hr> </section>
<section id="topic-5"> <h2>Modules</h2> <dl class="impl-status sl-c-description-list sl-c-description-list--horizontal"><div class="compatibility">Compatibility:</div> <div><dt>Dart&nbsp;Sass</dt> <dd>since&nbsp;<span class="caps">1.23.0</span></dd> </div> <div><dt>LibSass</dt> <dd>✗</dd> </div> <div><dt>Ruby&nbsp;Sass</dt> <dd>✗</dd> </div> <div><a>▶</a></div> </dl> <div class="sl-c-callout sl-c-callout--impl-status" style="display: none;"><p>Only Dart Sass currently supports <code>@use</code>. Users of other implementations must use the <a href="/documentation/at-rules/import"><code>@import</code> rule</a>&nbsp;instead.</p></div> <p>You don't have to write all your Sass in a single file. You can split it&nbsp;up however you want with the <code>@use</code> rule. This rule loads another Sass file&nbsp;as a <em>module</em>, which means you can refer to its variables, <a href="#topic-6">mixins</a>,&nbsp;and <a href="documentation/at-rules/function">functions</a> in your Sass file with a namespace based on the&nbsp;filename. Using a file will also include the <span class="caps">CSS</span> it generates in your compiled&nbsp;output!</p> <div class="code-example ui-tabs can-split ui-corner-all ui-widget ui-widget-content" style="--split-location: 50.0%"><ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-corner-all ui-widget-header" role="tablist"><li class="ui-tabs-tab ui-tabs-active ui-corner-top ui-state-default ui-tab ui-state-active" role="tab" tabindex="0" aria-controls="example-3-scss" aria-labelledby="ui-id-7" aria-selected="true" aria-expanded="true"><a href="#example-3-scss" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-7"><span class="caps">SCSS</span></a></li><li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" role="tab" tabindex="-1" aria-controls="example-3-sass" aria-labelledby="ui-id-8" aria-selected="false" aria-expanded="false"><a href="#example-3-sass" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-8">Sass</a></li><li class="ui-tabs-tab css-tab ui-corner-top ui-state-default ui-tab" role="tab" tabindex="-1" aria-controls="example-3-css" aria-labelledby="ui-id-9" aria-selected="false" aria-expanded="false"><a href="#example-3-css" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-9"><span class="caps">CSS</span></a></li></ul><div id="example-3-scss" class="ui-tabs-panel scss ui-corner-bottom ui-widget-content" aria-labelledby="ui-id-7" role="tabpanel" aria-hidden="false"><pre class="highlight scss"><code><span class="c1">// _base.scss
</span><span class="nv">$font-stack</span><span class="p">:</span>    <span class="n">Helvetica</span><span class="o">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="nv">$primary-color</span><span class="p">:</span> <span class="mh">#333</span><span class="p">;</span>

<span class="nt">body</span> <span class="p">{</span>
  <span class="nl">font</span><span class="p">:</span> <span class="m">100%</span> <span class="nv">$font-stack</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="nv">$primary-color</span><span class="p">;</span>
<span class="p">}</span>
</code></pre><pre class="highlight scss"><code><span class="c1">// styles.scss
</span><span class="k">@use</span> <span class="s1">'base'</span><span class="p">;</span>

<span class="nc">.inverse</span> <span class="p">{</span>
  <span class="nl">background-color</span><span class="p">:</span> <span class="n">base</span><span class="o">.</span><span class="nv">$primary-color</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div><div id="example-3-css" class="ui-tabs-panel css ui-tabs-panel-inactive ui-corner-bottom ui-widget-content" aria-labelledby="ui-id-9" role="tabpanel" aria-hidden="true" style=""><pre class="highlight css"><code><span class="nt">body</span> <span class="p">{</span>
  <span class="nl">font</span><span class="p">:</span> <span class="m">100%</span> <span class="n">Helvetica</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#333</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.inverse</span> <span class="p">{</span>
  <span class="nl">background-color</span><span class="p">:</span> <span class="m">#333</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
<span class="p">}</span>








</code></pre></div></div> <p>Notice we're using <code>@use 'base';</code> in the <code>styles.scss</code> file. When you use&nbsp;a file you don't need to include the file extension. Sass is smart and&nbsp;will figure it out for&nbsp;you.</p> <hr> </section>
<section id="topic-6"> <h2>Mixins</h2> <p>Some things in <span class="caps">CSS</span> are a bit tedious to write, especially with <span class="caps">CSS3</span>&nbsp;and the many vendor prefixes that exist. A mixin lets you make groups of&nbsp;<span class="caps">CSS</span> declarations that you want to reuse throughout your site. You can&nbsp;even pass in values to make your mixin more flexible. A good use of a mixin&nbsp;is for vendor prefixes. Here's an example for&nbsp;<code>transform</code>.</p> <div class="code-example ui-tabs can-split ui-corner-all ui-widget ui-widget-content" style="--split-location: 50.0%"><ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-corner-all ui-widget-header" role="tablist"><li class="ui-tabs-tab ui-tabs-active ui-corner-top ui-state-default ui-tab ui-state-active" role="tab" tabindex="0" aria-controls="example-4-scss" aria-labelledby="ui-id-10" aria-selected="true" aria-expanded="true"><a href="#example-4-scss" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-10"><span class="caps">SCSS</span></a></li><li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" role="tab" tabindex="-1" aria-controls="example-4-sass" aria-labelledby="ui-id-11" aria-selected="false" aria-expanded="false"><a href="#example-4-sass" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-11">Sass</a></li><li class="ui-tabs-tab css-tab ui-corner-top ui-state-default ui-tab" role="tab" tabindex="-1" aria-controls="example-4-css" aria-labelledby="ui-id-12" aria-selected="false" aria-expanded="false"><a href="#example-4-css" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-12"><span class="caps">CSS</span></a></li></ul><div id="example-4-scss" class="ui-tabs-panel scss ui-corner-bottom ui-widget-content" aria-labelledby="ui-id-10" role="tabpanel" aria-hidden="false"><pre class="highlight scss"><code><span class="k">@mixin</span> <span class="nf">transform</span><span class="p">(</span><span class="nv">$property</span><span class="p">)</span> <span class="p">{</span>
  <span class="na">-webkit-transform</span><span class="p">:</span> <span class="nv">$property</span><span class="p">;</span>
  <span class="na">-ms-transform</span><span class="p">:</span> <span class="nv">$property</span><span class="p">;</span>
  <span class="nl">transform</span><span class="p">:</span> <span class="nv">$property</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.box</span> <span class="p">{</span> <span class="k">@include</span> <span class="nd">transform</span><span class="p">(</span><span class="nf">rotate</span><span class="p">(</span><span class="m">30deg</span><span class="p">));</span> <span class="p">}</span>
</code></pre></div><div id="example-4-css" class="ui-tabs-panel css ui-tabs-panel-inactive ui-corner-bottom ui-widget-content" aria-labelledby="ui-id-12" role="tabpanel" aria-hidden="true" style=""><pre class="highlight css"><code><span class="nc">.box</span> <span class="p">{</span>
  <span class="nl">-webkit-transform</span><span class="p">:</span> <span class="n">rotate</span><span class="p">(</span><span class="m">30deg</span><span class="p">);</span>
  <span class="nl">-ms-transform</span><span class="p">:</span> <span class="n">rotate</span><span class="p">(</span><span class="m">30deg</span><span class="p">);</span>
  <span class="nl">transform</span><span class="p">:</span> <span class="n">rotate</span><span class="p">(</span><span class="m">30deg</span><span class="p">);</span>
<span class="p">}</span>

</code></pre></div></div> <p>To create a mixin you use the <code>@mixin</code> directive and give it a name.&nbsp;We've named our mixin <code>transform</code>. We're also using the variable&nbsp;<code>$property</code> inside the parentheses so we can pass in a transform of whatever we&nbsp;want. After you create your mixin, you can then use it as a <span class="caps">CSS</span>&nbsp;declaration starting with <code>@include</code> followed by the name of the&nbsp;mixin.</p> <hr> </section>
<section id="topic-7"> <h2>Extend/Inheritance</h2> <p>This is one of the most useful features of Sass. Using <code>@extend</code> lets&nbsp;you share a set of <span class="caps">CSS</span> properties from one selector to another. It helps&nbsp;keep your Sass very <span class="caps">DRY.</span> In our example we're going to create a simple&nbsp;series of messaging for errors, warnings and successes using another&nbsp;feature which goes hand in hand with extend, placeholder classes. A&nbsp;placeholder class is a special type of class that only prints when it is extended,&nbsp;and can help keep your compiled <span class="caps">CSS</span> neat and&nbsp;clean.</p> <div class="code-example ui-tabs ui-corner-all ui-widget ui-widget-content"><ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-corner-all ui-widget-header" role="tablist"><li class="ui-tabs-tab ui-tabs-active ui-corner-top ui-state-default ui-tab ui-state-active" role="tab" tabindex="0" aria-controls="example-5-scss" aria-labelledby="ui-id-13" aria-selected="true" aria-expanded="true"><a href="#example-5-scss" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-13"><span class="caps">SCSS</span></a></li><li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" role="tab" tabindex="-1" aria-controls="example-5-sass" aria-labelledby="ui-id-14" aria-selected="false" aria-expanded="false"><a href="#example-5-sass" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-14">Sass</a></li><li class="ui-tabs-tab css-tab ui-corner-top ui-state-default ui-tab" role="tab" tabindex="-1" aria-controls="example-5-css" aria-labelledby="ui-id-15" aria-selected="false" aria-expanded="false"><a href="#example-5-css" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-15"><span class="caps">CSS</span></a></li></ul><div id="example-5-scss" class="ui-tabs-panel scss ui-corner-bottom ui-widget-content" aria-labelledby="ui-id-13" role="tabpanel" aria-hidden="false"><pre class="highlight scss"><code><span class="cm">/* This CSS will print because %message-shared is extended. */</span>
<span class="nv">%message-shared</span> <span class="p">{</span>
  <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="mh">#ccc</span><span class="p">;</span>
  <span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="mh">#333</span><span class="p">;</span>
<span class="p">}</span>

<span class="c1">// This CSS won't print because %equal-heights is never extended.
</span><span class="nv">%equal-heights</span> <span class="p">{</span>
  <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
  <span class="nl">flex-wrap</span><span class="p">:</span> <span class="n">wrap</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.message</span> <span class="p">{</span>
  <span class="k">@extend</span> <span class="nv">%message-shared</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.success</span> <span class="p">{</span>
  <span class="k">@extend</span> <span class="nv">%message-shared</span><span class="p">;</span>
  <span class="nl">border-color</span><span class="p">:</span> <span class="no">green</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.error</span> <span class="p">{</span>
  <span class="k">@extend</span> <span class="nv">%message-shared</span><span class="p">;</span>
  <span class="nl">border-color</span><span class="p">:</span> <span class="no">red</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.warning</span> <span class="p">{</span>
  <span class="k">@extend</span> <span class="nv">%message-shared</span><span class="p">;</span>
  <span class="nl">border-color</span><span class="p">:</span> <span class="no">yellow</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div><div id="example-5-css" class="ui-tabs-panel css ui-tabs-panel-inactive ui-corner-bottom ui-widget-content" aria-labelledby="ui-id-15" role="tabpanel" aria-hidden="true" style=""><pre class="highlight css"><code><span class="c">/* This CSS will print because %message-shared is extended. */</span>
<span class="nc">.message</span><span class="o">,</span> <span class="nc">.success</span><span class="o">,</span> <span class="nc">.error</span><span class="o">,</span> <span class="nc">.warning</span> <span class="p">{</span>
  <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#ccc</span><span class="p">;</span>
  <span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
  <span class="nl">color</span><span class="p">:</span> <span class="m">#333</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.success</span> <span class="p">{</span>
  <span class="nl">border-color</span><span class="p">:</span> <span class="no">green</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.error</span> <span class="p">{</span>
  <span class="nl">border-color</span><span class="p">:</span> <span class="no">red</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.warning</span> <span class="p">{</span>
  <span class="nl">border-color</span><span class="p">:</span> <span class="no">yellow</span><span class="p">;</span>
<span class="p">}</span>













</code></pre></div></div> <p>What the above code does is tells <code>.message</code>, <code>.success</code>, <code>.error</code>,&nbsp;and <code>.warning</code> to behave just like <code>%message-shared</code>. That means anywhere&nbsp;that <code>%message-shared</code> shows up, <code>.message</code>, <code>.success</code>, <code>.error</code>, <span class="amp">&amp;</span>&nbsp;<code>.warning</code> will too. The magic happens in the generated <span class="caps">CSS</span>, where each of&nbsp;these classes will get the same <span class="caps">CSS</span> properties as <code>%message-shared</code>. This&nbsp;helps you avoid having to write multiple class names on <span class="caps">HTML</span>&nbsp;elements.</p> <p>You can extend most simple <span class="caps">CSS</span> selectors in addition to&nbsp;placeholder classes in Sass, but using placeholders is the easiest way to make&nbsp;sure you aren't extending a class that's nested elsewhere in your styles,&nbsp;which can result in unintended selectors in your&nbsp;<span class="caps">CSS.</span></p> <p>Note that the <span class="caps">CSS</span> in <code>%equal-heights</code> isn't generated,&nbsp;because <code>%equal-heights</code> is never&nbsp;extended.</p> <hr> </section>            
<section id="topic-8"> <h2>Operators</h2> <p>Doing math in your <span class="caps">CSS</span> is very helpful. Sass has a handful of&nbsp;standard math operators like <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>, and <code>%</code>. In our example&nbsp;we're going to do some simple math to calculate widths for an <code>aside</code> <span class="amp">&amp;</span>&nbsp;<code>article</code>.</p> <div class="code-example ui-tabs can-split ui-corner-all ui-widget ui-widget-content" style="--split-location: 50.0%"><ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-corner-all ui-widget-header" role="tablist"><li class="ui-tabs-tab ui-tabs-active ui-corner-top ui-state-default ui-tab ui-state-active" role="tab" tabindex="0" aria-controls="example-6-scss" aria-labelledby="ui-id-16" aria-selected="true" aria-expanded="true"><a href="#example-6-scss" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-16"><span class="caps">SCSS</span></a></li><li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab" role="tab" tabindex="-1" aria-controls="example-6-sass" aria-labelledby="ui-id-17" aria-selected="false" aria-expanded="false"><a href="#example-6-sass" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-17">Sass</a></li><li class="ui-tabs-tab css-tab ui-corner-top ui-state-default ui-tab" role="tab" tabindex="-1" aria-controls="example-6-css" aria-labelledby="ui-id-18" aria-selected="false" aria-expanded="false"><a href="#example-6-css" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-18"><span class="caps">CSS</span></a></li></ul><div id="example-6-scss" class="ui-tabs-panel scss ui-corner-bottom ui-widget-content" aria-labelledby="ui-id-16" role="tabpanel" aria-hidden="false"><pre class="highlight scss"><code><span class="nc">.container</span> <span class="p">{</span>
    <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
  <span class="p">}</span>
  
  <span class="nt">article</span><span class="o">[</span><span class="nt">role</span><span class="o">=</span><span class="s2">"main"</span><span class="o">]</span> <span class="p">{</span>
    <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
    <span class="nl">width</span><span class="p">:</span> <span class="m">600px</span> <span class="o">/</span> <span class="m">960px</span> <span class="o">*</span> <span class="m">100%</span><span class="p">;</span>
  <span class="p">}</span>
  
  <span class="nt">aside</span><span class="o">[</span><span class="nt">role</span><span class="o">=</span><span class="s2">"complementary"</span><span class="o">]</span> <span class="p">{</span>
    <span class="nl">float</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span>
    <span class="nl">width</span><span class="p">:</span> <span class="m">300px</span> <span class="o">/</span> <span class="m">960px</span> <span class="o">*</span> <span class="m">100%</span><span class="p">;</span>
  <span class="p">}</span>
  </code></pre></div><div id="example-6-css" class="ui-tabs-panel css ui-tabs-panel-inactive ui-corner-bottom ui-widget-content" aria-labelledby="ui-id-18" role="tabpanel" aria-hidden="true" style=""><pre class="highlight css"><code><span class="nc">.container</span> <span class="p">{</span>
    <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
  <span class="p">}</span>
  
  <span class="nt">article</span><span class="o">[</span><span class="nt">role</span><span class="o">=</span><span class="s1">"main"</span><span class="o">]</span> <span class="p">{</span>
    <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
    <span class="nl">width</span><span class="p">:</span> <span class="m">62.5%</span><span class="p">;</span>
  <span class="p">}</span>
  
  <span class="nt">aside</span><span class="o">[</span><span class="nt">role</span><span class="o">=</span><span class="s1">"complementary"</span><span class="o">]</span> <span class="p">{</span>
    <span class="nl">float</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span>
    <span class="nl">width</span><span class="p">:</span> <span class="m">31.25%</span><span class="p">;</span>
  <span class="p">}</span>
  </code></pre></div></div> <p>We've created a very simple fluid grid, based on 960px. Operations in&nbsp;Sass let us do something like take pixel values and convert them to&nbsp;percentages without much&nbsp;hassle.</p> <hr> </section>
</div>          </div>
       </div>
       <div class="alert release">
            <div class="container">
                <ul>
                    <li>Current Release：<span class="release-name">Select Steve（3.4.17）</span></li>
                    <li><a href="documentation/file.SASS_CHANGELOG.html">Release Notes</a></li>
                    <li><a href="https://github.com/sass/sass">Fork on Github</a></li>
                </ul>
            </div>
       </div>
   </div>
   <footer class="contentinfo" role="contentinfo">
        <nav class="container">
            <ul>
                <li class="contentinfo-legal">
                    <p>
                        Sass © 2006–2020  
                        <a href="http://www.hamptoncatlin.com/">Hampton Catlin</a>,
                        <a href="http://next-3.cpm">Natalie Weizenbaum</a>,
                        <a href="http://chriseppstein.github.io/">Chris&nbsp;Eppstein</a>,
                        and&nbsp;numerous&nbsp;contributors.
                    </p>
                    <p>
                        It is available for use and modification under the 
                        <a href="http://sass-lang.com/docs/yardoc/file.MIT-LICENSE.html">MIT&nbsp;License</a>.
                    </p>
                </li>
                <li class="contentinfo-tools">
                    <ul>
                        <li><a href="https://github.com/sass/sass">Sass Repo</a></li>
                        <li><a href="https://github.com/sass/sass-site">Website Repo</a></li>
                        <li><a href="/styleguide">Style Guide</a></li>
                        <li><a href="/community-guidelines">Community Guidelines</a></li>
                        <li><a href="https://gitee.com/chu_li_zhu">Gitee</a></li>
                      </ul>
                </li>
                <li class="contentinfo-social">
                    <a class="twitter-follow-button"  data-show-count="false" data-size="large" href="https://twitter.com/SassCSS">Follow @SassCSS</a>
                </li>
            </ul>
        </nav>
   </footer>
</body>
</html>